<template>
  <div class="com_conatiner">
    <slot></slot>
    <div class="transverseLine left top" v-if="lines.includes(4)"></div>
    <div class="transverseLine right top" v-if="lines.includes(1)"></div>
    <div class="transverseLine left bottom" v-if="lines.includes(3)"></div>
    <div class="transverseLine right bottom" v-if="lines.includes(2)"></div>
  </div>
</template>

<script>
export default {
  props: {
    lines: {
      default: () => [],
      type: Array,
    },
  },
};
</script>

<style scoped>
.com_conatiner {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  padding-top: 40px;
  padding-left: 45px;
  padding-right: 45px;
  background-color: #ebeef5;
}

.com_conatiner:hover {
  z-index: 999999;
}

.com_conatiner::after {
  content: "";
  position: absolute;
  height: 100%;
  width: 1px;
  background: #ddd;
  top: 0;
}

.transverseLine {
  position: absolute;
  height: 1px;
  width: 50%;
  background: #ddd;
}

.left {
  left: 0;
}

.top {
  top: 0;
}

.right {
  left: 50%;
}

.bottom {
  bottom: 0;
}
</style>